<template>
	<view class="bodyClass">
		<view class="itemClass">
			<view style="font-size: 18px;margin: 20px;">账号注册</view>
			<uni-forms ref="valiForm" :modelValue="baseFormData" :rules="rules" label-width="80px">
				<uni-forms-item label="账号类型" required>
					<uni-data-checkbox v-model="baseFormData.isRole" :localdata="roles" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required name="username">
					<uni-easyinput v-model="baseFormData.username" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput v-model="baseFormData.password" placeholder="请输入密码" type="password"/>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit()">注册账号</button>
			<view style="font-size: 13px;margin: 20px;color:blue;" @click="denglu">已有账号？前往登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData:{},
				roles:[{
					text: '用户',
					value: 1
				}, {
					text: '司机',
					value: 2
				}],
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						},{
							validateFunction: function (rule, value, data, callback) {
								let iphoneReg = /^1[0-9]{10}$/
									if (!iphoneReg.test(value)) {
										callback('手机号码格式不正确，请重新填写')
									}
								return true
							}
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					}
				},
			}
		},
		methods: {
			submit() {
				this.$refs.valiForm.validate().then(res => {
					console.log('success', res);
					uni.chooseLocation({
						success: function (res) {
							this.baseFormData.latlon = res.latitude + ',' + res.longitude
							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
						}
					});
					uni.request({
						url: 'http://localhost:8084/api/login/register',
						method: 'POST',
						data: this.baseFormData,
						success(res) {
							console.log(res);
							if (res.data.code !== 200) {
								uni.showToast({title:res.data.msg,icon:'error',duration: 2000})
								return
							} else{
								uni.showToast({title:'注册成功',duration: 2000})
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						},
						fail(err) {
							uni.showToast({title:err.data.msg,icon:'error',duration: 2000})
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			denglu(){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style>
.bodyClass{
	margin-top: 50px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.itemClass{
	padding: 30px;
	width: 80%;
	background-color: aliceblue;
}
</style>
